<template>
    <div class="A_content">
        <div class="A_set">
            <div style="margin:20px 0;">
                <label style="font-size:16px;font-weight:600;margin:20px 0;color:#6B6B6B;">当前时间：<span>{{nowTime}}</span></label>
            </div>
            <Row>
                <Col span="15">
                    <!-- 网站运行情况 -->
                    <div class="web_state">
                        <div class="web_t"><span style="margin-left:20px;display:block;padding-top:6px;">网站运行情况</span>
                        </div>

                        <Row>
                            <Col span="8">
                                <div class="web_t1">
                                    <p style="padding-top:12px;font-size:14px;">昨日提交量</p>
                                    <div class="w_hr"/>
                                    <p style="padding-top:2px;font-size:30px;">{{top_number.yesterday_post}}</p>
                                </div>
                            </Col>

                            <Col span="8">
                                <div class="web_t12">
                                    <p style="padding-top:12px;font-size:14px;">昨日通过次数</p>
                                    <div class="w_hr"/>
                                    <p style="padding-top:2px;font-size:30px;">{{top_number.yesterday_post}}</p>
                                </div>
                            </Col>

                            <Col span="8">
                                <div class="web_t13">
                                    <p style="padding-top:12px;font-size:14px;">网站用户总数</p>
                                    <div class="w_hr"/>
                                    <p style="padding-top:2px;font-size:30px;">{{middle_number.student_number}}</p>
                                </div>
                            </Col>
                        </Row>
                    </div>

                    <div class="web-n">
                        <Col span="8">
                            <div class="web_t2">
                                <i-circle
                                        :size="120"
                                        :trail-width="4"
                                        :stroke-width="5"
                                        :percent="100"
                                        stroke-linecap="square"
                                        stroke-color="#67CDA6">
                                    <div class="demo-Circle-custom">
                                        <p>{{middle_number.student_number}}</p>
                                        <span>
                    注册用户数目
                  </span>
                                    </div>
                                </i-circle>
                            </div>
                        </Col>

                        <Col span="8">
                            <div class="web_t2">
                                <i-circle
                                        :size="120"
                                        :trail-width="4"
                                        :stroke-width="5"
                                        :percent="100"
                                        stroke-linecap="square"
                                        stroke-color="#52BFF8">
                                    <div class="demo-Circle-custom">
                                        <p>{{middle_number.question_number}}</p>
                                        <span>
                    竞赛题库数目
                  </span>
                                    </div>
                                </i-circle>
                            </div>
                        </Col>

                        <Col span="8">
                            <div class="web_t2">
                                <i-circle
                                        :size="120"
                                        :trail-width="4"
                                        :stroke-width="5"
                                        :percent="100"
                                        stroke-linecap="square"
                                        stroke-color="#4EC4CC">
                                    <div class="demo-Circle-custom">
                                        <p>{{middle_number.course_number}}</p>
                                        <span>
                    实验题库数目
                  </span>
                                    </div>
                                </i-circle>
                            </div>
                        </Col>
                    </div>

                </Col>


                <Col span="9">
                    <Row>
                        <Col
                                span="12"
                                style="height:153px;">
                            <router-link to="testmain">
                                <div class="web-button">
                                    <img
                                            src="../../assets/004.png"
                                            alt="查看实验题库"
                                            width="80"
                                            style="margin-top:25px;"
                                    >
                                    <p style="font-size:15px;font-weight:600;margin-top:20px;color:#1296DB;">查看实验题库</p>
                                </div>
                            </router-link>
                        </Col>

                        <Col
                                span="12"
                                style="height:153px;">
                            <router-link to="Aquestion">
                                <div class="web-button">
                                    <img
                                            src="../../assets/001.png"
                                            alt="查看竞赛题库"
                                            width="80"
                                            style="margin-top:25px;">
                                    <p style="font-size:15px;font-weight:600;margin-top:20px;color:#19BE6B;">查看竞赛题库</p>
                                </div>
                            </router-link>
                        </Col>

                    </Row>
                    <Row style="margin-top:40px;">
                        <Col
                                span="12"
                                style="height:153px;">
                            <router-link to="createTest">
                                <div class="web-button">
                                    <img
                                            src="../../assets/002.png"
                                            alt="上传实验题目"
                                            width="80"
                                            style="margin-top:25px;">
                                    <p style="font-size:15px;font-weight:600;margin-top:20px;color:#1296DB;">上传实验题目</p>
                                </div>
                            </router-link>
                        </Col>
                        <Col
                                span="12"
                                style="height:153px;">
                            <router-link to="createQuestion">
                                <div class="web-button">
                                    <img
                                            src="../../assets/003.png"
                                            alt="上传竞赛题目"
                                            width="80"
                                            style="margin-top:25px;">
                                    <p style="font-size:15px;font-weight:600;margin-top:20px;color:#19BE6B;">上传竞赛题目</p>
                                </div>
                            </router-link>
                        </Col>
                    </Row>
                </Col>
            </Row>


            <div class="A_main_set">
                <span style="margin-left:20px;display:block;padding-top:6px;font-size:15px;">近两周提交数目</span>
                <!-- <div style="width:100%;text-align: center;"><img
                  src="../../images/chart.png"
                  alt="图表"
                  class="A-img"> -->

                <div id="myChart" :style="{width: '100%', height: '400px'}"></div>
            </div>

        </div>


    </div>

</template>

<style lang="less" scoped>
    @import "../../style/A.css";

    .demo-Circle-custom {
        & h1 {
            color: #3f414d;
            font-size: 28px;
            font-weight: normal;
        }

        & p {
            color: #657180;
            font-size: 20px;
            margin: 5px 0 9px;
        }

        & span {
            display: block;
            padding-top: 10px;
            color: #657180;
            font-size: 14px;

            &:before {
                content: '';
                display: block;
                width: 50px;
                height: 1px;
                margin: 0 auto;
                background: #e0e3e6;
                position: relative;
                top: -15px;
            }

        ;
        }

        & span i {
            font-style: normal;
            color: #3f414d;
        }
    }
</style>

<script scoped>
    export default {
        created() {
            let _this = this;
            this.$store.commit('setATitle', 'main');
            this.ajax.post(_this.postIp + "/get_everydaypost_number").then(function (msg) {
                console.log(msg.data.data);
                let pdata = [];
                let pcount = [];
                for (let i = 0; i < msg.data.data.length; i++) {
                    pdata.push(msg.data.data[i].date);
                    pcount.push(msg.data.data[i].count);
                }
                _this.option.xAxis.data = pdata;
                _this.option.series[0].data = pcount;
                _this.drawLine(_this.option);
            });
            this.ajax.post(_this.postIp + "/web_situation").then(function (msg) {
                _this.top_number = msg.data.data;
            });
            this.ajax.post(_this.postIp + "/get_three_number").then(function (msg) {
                _this.middle_number = msg.data.data;
            });
            this.timeFormate();
        },
        data() {
            return {
                nowTime: '',
                middle_number: {},
                top_number:{},
                option: {
                    title: {},
                    tooltip: {},
                    barWidth: 25,
                    xAxis: {
                        data: ["2019/1/1", "2019/1/2", "2019/1/3", "2019/1/4", "2019/1/5", "2019/1/6", "2019/1/7", "2019/1/8", "2019/1/9", "2019/1/10", "2019/1/11", "2019/1/12", "2019/1/13", "2019/1/14"]
                    },
                    yAxis: {},
                    series: [{
                        name: '提交量',
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: '#5B9BD5'
                            }
                        },
                        data: [400, 320, 536, 710, 910, 820, 790, 1080, 1060, 1001, 1020, 1234, 956, 800]
                    }]
                }
            }
        },
        // mounted() {
        //     this.drawLine(this.option);
        // },
        methods: {
            timeFormate() {
                let _this = this;
                let year = new Date().getFullYear();
                let month = new Date().getMonth() + 1 < 10 ? "0" + (new Date().getMonth() + 1) : new Date().getMonth() + 1;
                let date = new Date().getDate() < 10 ? "0" + new Date().getDate() : new Date().getDate();
                let hh = new Date().getHours() < 10 ? "0" + new Date().getHours() : new Date().getHours();
                let mm = new Date().getMinutes() < 10 ? "0" + new Date().getMinutes() : new Date().getMinutes();
                // let ss =new Date(timeStamp).getSeconds() < 10? "0" + new Date(timeStamp).getSeconds(): new Date(timeStamp).getSeconds();
                // return year + "年" + month + "月" + date +"日"+" "+hh+":"+mm ;
                this.nowTime = year + "年" + month + "月" + date + "日" + " " + hh + ":" + mm;
                // console.log(this.nowTime);
                setTimeout(() => {
                    _this.timeFormate();
                }, 1000);
            },
            drawLine(option) {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('myChart'))
                // 绘制图表
                myChart.setOption(option);
            }
        },

    }
</script>
